import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image,Swiper,SwiperItem } from '@tarojs/components'
import {AtIcon } from 'taro-ui'
import './aolideOpmeal.scss'
import item_image from '../../img/item_image.png'
import app from '../../main'


export default class AolideOpmeal extends Component {

    config = {
      navigationBarTitleText: ''
    } 
    constructor(){
        super(...arguments)
        this.state={
            taocaoInfo: {},
            lunboList:[]
        }
    }

    offset = 0
    length = 8

    //获得服务项目详情数据
    getData () {
        let me = this
        let hospital_id = this.$router.params.hospital_id
        let id = this.$router.params.id
        let data = {offset:this.offset, length:this.length, hospital_id:hospital_id, hospital_server_id:id}
        app.get('web/hospital/hospitalServerDetail', data, (res)=>{
            me.setState({
                taocaoInfo:res.data.result.data
            })
        })
    }
    
    //轮播图
    getSwiperDatas () {
        let me = this
        let data ={code:100}
        app.get('web/advertisement/banners', data, (res)=>{
            me.setState({             
                lunboList:res.data.result
            })
        })
    }

    componentWillMount () {
        this.getData()
        this.getSwiperDatas()
        Taro.setNavigationBarTitle({
            title:this.$router.params.title
        })
    }

    render(){
        const { taocaoInfo } = this.state

        let swiperList = this.state.lunboList.map((item)=>{
                            return  <SwiperItem>
                                        <View>
                                            <Image
                                            className='swiperImage'
                                            src={item.image}
                                            />
                                        </View>
                                    </SwiperItem>
                         })

        return(
            <View className="all">
                <View className='topSwiper'>
                    <View className='swiper'>
                        <Swiper
                        indicatorDots
                        indicatorColor='#ccc'
                        indicatorActiveColor='#fff'
                        circular
                        autoplay
                        >
                          {swiperList}
                        </Swiper>
                    </View>
                    {/* 套餐信息 */}
                    <View className='infoText'>
                        <View className='textTitle'>
                        <Text>{taocaoInfo.title}</Text>
                        </View>
                        <View className='money'>
                            <Text className='present'>现价： {taocaoInfo.current_price}元</Text>
                            <Text className='origina'>原价： {taocaoInfo.original_price}</Text>
                        </View>
                        <View className='infoBotton'>
                            <AtIcon value='eye' size='15'/>
                            <Text>{taocaoInfo.make_num}人成功预约</Text>
                        </View>
                    </View>
                </View>
                <View className='centerTitle'>
                    {taocaoInfo.label.map((item)=>{
                        return  <View className='titleText'>
                                    <AtIcon value='check-circle' size='19'/>
                                    <Text>{item}</Text>
                                </View>
                    })}
                </View>
                {/* 套餐图片内容 */}
                <View className='bottonImage'>
                    {taocaoInfo.image.map((item2)=>{
                        return <View>
                                    <Image
                                    className='image'
                                    src={item2}
                                    />
                                </View>
                    })}
                </View>
                {/* 底部按钮 */}
                <View className='bottomBtn2'>
                    <View className='leftBtn'>
                        <Text>在线咨询</Text>
                    </View>
                    <View className='rightBtn'>
                        <Text>立即购买</Text>
                    </View>
                </View>
            </View>
        )
    }
}